
<!-- 渠道统计 -->
<template>
  <div>
    <div class="box">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="9">
          <div class="left">
            <span class="time">时间:</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getDate"
            />
          </div>
        </el-col>

      </el-row>

    </div>
    <!-- 图例 -->
    <div class="legend" style="display: flex;">
      <div id="mains" style="width: 700px;height: 400px;" />
      <div id="mainss" style="width: 500px;height: 400px;" />
    </div>

    <div>
      <div class="tap">
        <span class="text">渠道统计报表</span>

        <el-row>
          <el-button type="primary" class="export">导出</el-button>
        </el-row>
      </div>
      <div class="floor">
        <span>高级搜索</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search">
        <el-form label-width="100px">
          <el-row class="search_row">
            <el-col :span="8">
              <el-form-item label="渠道来源：">
                <el-select v-model="value" placeholder="请选择活动区域" style="width: 280px;">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活动编号：">
                <el-select v-model="value" placeholder="请选择活动区域" style="width: 280px;">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活动名称：">
                <el-select v-model="value" placeholder="请选择活动区域" style="width: 280px;">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item class="search_btn">
                <el-button class="cus-reset-btn">重置</el-button>
                <el-button class="cus-search-btn" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 列表区域 -->
      <div>
        <el-table class="cus-table-box" stripe :data="list">
          <el-table-column type="selection" width="62" align="center" />
          <el-table-column label="渠道来源" align="center" prop="channel" />
          <el-table-column label="活动编号" align="center" prop="hdbh" />
          <el-table-column label="活动简介" align="center" prop="hdmc" />
          <el-table-column label="线索总数" align="center" prop="hdjj" />
          <el-table-column label="伪线索数" align="center" prop="xszs" />
          <el-table-column label="转化商机数" align="center" prop="wxss" />
          <el-table-column label="转化客户数" align="center" prop="zhkhs" />
          <el-table-column label="成交金额" align="center" prop="cjje" />
          <el-table-column label="活动成本" align="center" prop="hdcb" />
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getChannelListApi, getChannelEchartsApi, getChannelEchartsTwoApi } from '@/api/channel'
export default {
  data() {
    return {
      value: '',
      value1: ['2022-04-01', '2023-05-31'],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 9,
      list: [
        { channel: '线上活动', hdbh: 'sdf15df', hdmc: '双11打折', hdjj: '35', xszs: '0', wxss: '12', zhkhs: '7', cjje: '1526', hdcb: '1600', cjsj: '2022-02-06' },
        { channel: '推广介绍', hdbh: 'saft8b', hdmc: '新校区拉新活动', hdjj: '56', xszs: '0', wxss: '45', zhkhs: '2', cjje: '70', hdcb: '1000', cjsj: '2023-01-18' },
        { channel: '推广介绍', hdbh: 'art3vbn', hdmc: '教师节活动', hdjj: '65', xszs: '0', wxss: '78', zhkhs: '1', cjje: '7578', hdcb: '8000', cjsj: '2022-05-14' },
        { channel: '线上活动', hdbh: 'rer8gbs', hdmc: '推广拉新', hdjj: '78', xszs: '0', wxss: '36', zhkhs: '8', cjje: '7888', hdcb: '8000', cjsj: '2022-08-30' },
        { channel: '推广介绍', hdbh: 'wgy7hf', hdmc: '年底促销', hdjj: '85', xszs: '0', wxss: '63', zhkhs: '2', cjje: '7854', hdcb: '8000', cjsj: '2022-09-25' },
        { channel: '推广介绍', hdbh: 'grt2dd', hdmc: '新春大促销活动', hdjj: '65', xszs: '0', wxss: '0', zhkhs: '5', cjje: '95854', hdcb: '100000', cjsj: '2022-10-07' },
        { channel: '线上活动', hdbh: 'yurt7j', hdmc: '新春大促销活动', hdjj: '45', xszs: '0', wxss: '78', zhkhs: '4', cjje: '7858', hdcb: '8000', cjsj: '2022-11-15' },
        { channel: '推广介绍', hdbh: 'gbf3ghj', hdmc: '新校区拉新活动', hdjj: '78', xszs: '0', wxss: '54', zhkhs: '6', cjje: '1571', hdcb: '1600', cjsj: '2022-12-14' },
        { channel: '线上活动', hdbh: 'rtyb8', hdmc: '年底促销', hdjj: '65', xszs: '78', wxss: '0', zhkhs: '6', cjje: '78955', hdcb: '80000', cjsj: '2022-13-15' }
      ],
      form: {
        begin: null,
        end: null
      }

    }
  },
  created() {
    this.getChannelList()
  },
  mounted() {
    this.initCharts()
    this.twoCharts()
  },
  methods: {
    handleCurrentChange(page) {
      this.params.page = page
      this.getChannelList()
    },
    /**
     * 时间选择器改变
     */
    async getDate(data) {
      this.form.begin = data[0]
      this.form.end = data[1]
      this.getChannelEcharts()
      this.getChannelEchartsTwo()
    },
    async getChannelEchartsTwo() {
      const res = await getChannelEchartsTwoApi(this.form)
      console.log(res)
    },
    /**
     * 第二个图例
     */
    twoCharts() {
      const chartDom = echarts.init(document.getElementById('mainss'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 116, name: '持续优惠' },
              { value: 110, name: '双11打折' }
            ]
          }
        ]
      }
      chartDom.setOption(option)
      window.addEventListener('resize', function() {
        chartDom.resize()
      })
    },
    /**
     * 第一个图例
     */
    initCharts() {
      const chartDom = echarts.init(document.getElementById('mains'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 4, name: '线上活动' },
              { value: 1, name: '推广介绍' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      chartDom.setOption(option)
      window.addEventListener('resize', function() {
        chartDom.resize()
      })
    },
    /**
     * 渠道一图
     */
    async getChannelEcharts() {
      const { data } = await getChannelEchartsApi(this.form)
      console.log(data)
      this.channel = data.channel
      this.num = data.num
    },
    /**
     * 渠道统计列表
     */
    async getChannelList() {
      const res = await getChannelListApi()
      // console.log(res)
      this.list = res.data.records
    }
  }
}
</script>

<style scoped lang="scss">
.box{
    margin-top: 20px;
    margin-bottom: 100px;
    .left{
      display: inline;
    }
    .right{
      display: inline;
    }
}
 .legend{
    height: 300px;
    background-color: transparent;
    margin-bottom: 70px;
 }
.time{
    margin-right: 10px;
}

.tap{
    display: flex;
    height: 40px;
    margin-bottom: 10px;
    justify-content: space-between;

}
.text{
    line-height: 40px;
    margin-left: 10px;
}
.export{
  // margin-top: -50px;
  height: 40px;
  text-align: center;
  // line-height: 40px;
}
.floor{
    height: 40px;
    background-color: #f2f2f2;
    span{
        line-height: 40px;
        margin-left: 10px;
    }
}
.search{
    height: 200px;
}
.search_row{
  padding-top: 25px;
  padding-left: 50px;
}
.search_btn{
  margin-right: 55px;
 text-align: right;
}
.block{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>

